<template>
  <div class="learnIndex">
    <div class="content">
      <div class="contentInner">
        <img src="@as/img/kaoshi_jiangbei@2x.png" alt>
        <p class="score">
          考试得分
          <span>{{data.data.exam_total}}</span>分
        </p>

        <div class="score2">
          <p>
            总分
            <span>{{data.data.test_total}}</span>
            分
          </p>

          <p>
            合格分
            <span>{{data.data.pass_grade}}</span>
            分
          </p>

          <p>
            答卷耗时
            <span>{{ Math.ceil(data.data.time_consuming/60) }}</span>
            分钟
          </p>
        </div>
        <table class="table">
          <tr>
            <th class="first">题型</th>
            <th>总题数</th>
            <th>答对题数</th>
            <th>总分</th>
            <th class="last">得分</th>
          </tr>
          <tr>
            <td>单选题</td>
            <td>{{data.data.single.a}}</td>
            <td class="red">{{data.data.single.b}}</td>
            <td>{{data.data.single.c}}</td>
            <td class="lastCol">{{data.data.single.d}}</td>
          </tr>
          <tr>
            <td>多选题</td>
            <td>{{data.data.many.a}}</td>
            <td class="red">{{data.data.many.b}}</td>
            <td>{{data.data.many.c}}</td>
            <td class="lastCol">{{data.data.many.d}}</td>
          </tr>
          <tr>
            <td>不定向题</td>
            <td>{{data.data.indefinite.a}}</td>
            <td class="red">{{data.data.indefinite.b}}</td>
            <td>{{data.data.indefinite.c}}</td>
            <td class="lastCol">{{data.data.indefinite.d}}</td>
          </tr>
          <tr>
            <td>判断题</td>
            <td>{{data.data.judge.a}}</td>
            <td class="red">{{data.data.judge.b}}</td>
            <td>{{data.data.judge.c}}</td>
            <td class="lastCol">{{data.data.judge.d}}</td>
          </tr>
        </table>

        <div class="box">
          <div>
            <p>
              总题目数:
              <span>{{data.data.total_item}}</span>
            </p>
            <p>
              答对题目:
              <span>{{data.data.answer_item}}</span>
            </p>
          </div>
          <div>
            <p>
              试卷总分:
              <span>{{data.data.test_total}}</span>
            </p>
            <p>
              考试总分:
              <span>{{data.data.exam_total}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="bottom1">
        <div class="btn2" @click="rank" v-if="!state">查看排行</div>
        <div class="btn" @click="go">答题解析</div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                listData: [],
                state:false,
                data: JSON.parse(localStorage.getItem("grade"))
            };
        },
        mounted() {
            this.$progress.done();
            this.state = this.$route.query.state||false
        },
        filters: {
            time: function(e) {
                var h = Math.floor(e / 3600);
                var m = Math.floor(e / 60) % 60;
                var s = Math.floor(e % 60);
                return (
                    h.toString().padStart(2, "0") +
                    ":" +
                    m.toString().padStart(2, "0") +
                    ":" +
                    s.toString().padStart(2, "0")
                );
            }
        },
        methods: {
            rank() {
                this.$router.push({
                    path: "/learn/examRank",
                    query: { id: this.$route.query.id }
                });
            },

            go() {
                this.$router.push({
                    path: "/learn/answerAnalysis",
                });
            }
        }
    };
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  .learnIndex {
    position: relative;
    background: url("~@as/img/xuexi_datizhuangkuang_bg@2x.png");
    background-size: 100% 100%;
    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 0;

    .btn {
      margin-top: 15px;
      width: 130px;
      height: 36px;
      background: #eb4d44;
      color: #fff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }
    .btn2 {
      margin-top: 15px;
      width: 130px;
      height: 36px;
      background: #fff;
      border: 1px solid #eb4d44;
      color: #eb4d44;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }
    .content {
      position: relative;
      width: 335px;
      /*height: 86vh;*/
      height: calc( 100% - 130px );
      background: #fff;
      margin-top: 82px;
      border-radius: 4px;
      padding: 20px 10px 20px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .contentInner{
        height: calc( 100% - 40px);
        /*background: red;*/
        overflow-y: scroll;
      }
      img {
        display: block;
        height: 110px;
        margin: 0 auto;
        width: auto;
      }
    }
    .bigBox {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start !important;
    }

    .score {
      margin-top: 30px;
      font-size: 14px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 10px;
      text-align: center;
      span {
        color: #eb4d44;
        font-size: 33px;
      }
    }

    .score {
      margin-top: 30px;
      font-size: 14px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 10px;

      span {
        color: #eb4d44;
        font-size: 33px;
      }
    }

    .score2 {
      margin-top: 30px;
      font-size: 14px;
      width: 100%;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 10px;
      display: flex;
      justify-content: space-around;

      span {
        color: #eb4d44;
      }
    }

    .table {
      width: 100%;
      margin: 15px 0;
    }
    .table th {
      font-weight: bold;
      background-color: #f8f8f8;
      color: #999999;
      font-size: 12px;
    }
    .table,
    .table th,
    .table td {
      font-size: 14px;
      text-align: center;
      padding: 4px;
      border-collapse: collapse;
    }
    .table th {
      border: 1px solid #eeeeee;
      border-width: 1px;
      border-top: 0;
    }

    table {
      font-size: 14px;
      border-collapse: collapse;
      border: 0px solid #999;
    }

    table td {
      border-top: 0;
      border-right: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      border-left: 0;
    }
    table tr td.lastCol {
      border-right: 0;
      color: #f47548;
    }

    .red {
      color: #f47548;
    }
    .last {
      border-right: 0 !important;
    }
    .first {
      border-left: 0 !important;
    }

    .box {
      background: rgba(244, 117, 72, 0.08);
      width: 100%;
      display: flex;
      justify-content: space-around;
      p {
        margin: 15px;
        font-size: 14px;
        color: #666666;
        span {
          color: #eb4d44;
        }
      }
    }
    .bottom1 {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      /*margin-bottom: 40px;*/
    }
  }
</style>